<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
          <el-form-item label="直播计划名称：" style="margin-left:-30px">
             <br> <br>
            <el-input v-model="formInline.planName"  clearable style="margin-left:-60px;width:200px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="活动状态"  style="margin-left:-60px">
             <br> <br>
            <el-select v-model="formInline.storeType"  placeholder="全部" clearable style="margin-left:-40px;width:200px">
            <el-option label="全部" value></el-option>
              <el-option label="未开始" value="1"></el-option>
              <el-option label="进行中" value="2"></el-option>
              <el-option label="已截止" value="3"></el-option>
            </el-select>
          </el-form-item> -->
         <el-form-item label="审核状态：" style="margin-left:-30px">
            <br> <br>
            <el-select v-model="formInline.approvalStatus" placeholder="全部" clearable style="margin-left:-60px;width:200px">
            <el-option label="全部" value = "6"></el-option>
            <el-option label="待审批" value="1"></el-option>
            <el-option label="已审批" value="2"></el-option>
            <el-option label="已驳回" value="3"></el-option>
            </el-select>
          </el-form-item>
          <br> <br>
          <el-form-item label="自动审核：">
                <el-switch v-model="formInline.value1" @change="changeValue" style="margin-top:10px;"
                active-text="开"
                inactive-text="关"></el-switch>
                </el-form-item>
          <el-form-item  style="margin-left:100px;margin-top:20px;margin-bottom:20px">
            
            <!-- <el-button type="primary" @click="selectSend2()" size="mini" :disabled="this.dataListSelections.length>0">批量审核</el-button> -->
            <el-button type="primary" @click="search()" size="mini" icon="el-icon-search" style="margin-left:600px;text-align:right;">查询</el-button>
            <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete" style="margin-left:0px;text-align:right;">清空</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
         height="400px"
      v-loading="loading"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <!-- <el-table-column type="selection" :selectable="selectInit" width="60" align="center"></el-table-column> -->
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="planCode" label="申请单号" align="left" width="140"></el-table-column>
      <el-table-column prop="planName" label="直播计划名称" align="left" width="140"></el-table-column>
      <el-table-column prop="storeName" label="门店名称" align="left" width="140"></el-table-column>
      <el-table-column prop="storeType" label="直播时间" align="left" width="200">
        <template slot-scope="scope">
          <template v-for="item,index in scope.row.zbHomeDTOList">
            <div>{{item.startTime+" - "+item.endTime}}</div>
        </template>
          <!-- {{scope.row.beginTime+" 至 "+scope.row.endTime}} -->
          </template>
      </el-table-column>
      <el-table-column prop="countSum" label="参与直播商品数" align="right" width="140"></el-table-column>
      <el-table-column prop="createUser" label="申请人" align="left" width="120"></el-table-column>
      <el-table-column prop="createTime" label="发起时间" align="center" width="200"></el-table-column>
      <el-table-column prop="approvalStatus" label="审核状态" align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.approvalStatus === 1">未审批</span>
          <span v-if="scope.row.approvalStatus === 2">已审批</span>
          <span v-if="scope.row.approvalStatus === 3">已驳回</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click="seedetail(scope.row)" type="text" size="mini">详情</el-button>
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="scope.row.approvalStatus == 1 && !formInline.value1"
          >审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="审核意见" :visible.sync="dialogVisible" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="是否通过" prop="approvalStatus" style="margin:10px 0">
          <el-select v-model="ruleForm.approvalStatus">
            <el-option label="通过" value="2"></el-option>
            <el-option label="不通过" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核意见" prop="approvalComments">
          <el-input type="textarea" v-model="ruleForm.approvalComments" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  systemparameterList,
  updateinfo
} from "@/api/systemparameter";
import {
    query_getZonePlanList,
    save_review,
  } from "@/api/liveStore";
import {
  preliminaryExamination,
  shopPreliminary
} from "@/api/addShopapply";
import qs from "qs";
export default {
  data() {
    return {
      dataListSelections: [],
      userType: "",
      orgSeq: "",
      listQuery: {
        current: 1,
        size: 10
      },
      ruleForm: {
        approvalStatus: "",
        approvalComments: ""
      },
      total: 0,
      data: [],
      formInline: {
        planName: "",
        planCode: "",
        approvalStatus: "6",
        storeType: "",
        companyName: "",
        legalPerson: "",
        status: "1",
        storeAddressDetail: "",
        value1:true,
        uuid:""
      },

      loading: true,
      dialogVisibleorg: false,
      tableData: [],
      reviewTypeflag: "",
      orgList: {},
      uuid: "",
      roleid: "",
      dialogVisible: false,
      rules: {
        approvalStatus: [
          { required: true, message: "请选择审核意见", trigger: "blur" }
        ],
        approvalComments: [
          { required: true, message: "请输入审核意见", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.rolemanageone();
    this.logininfo = localStorage.getItem("logininfo");

    this.orgList = JSON.parse(this.logininfo).orgList;
    this.userType =
      JSON.parse(localStorage.getItem("logininfo")).orgList[0].userType || "";

    if(this.userType == 4 || this.userType == 5 || this.userType == 6){

        this.orgSeq = JSON.parse(localStorage.getItem("logininfo")).orgList[0].orgSeq || "";

    }
    if(this.$route.params.formInline != undefined) {this.formInline = this.$route.params.formInline}
    this._queryUserReviewInfo();
  },
  methods: {
    kong() {
      this.formInline.planName = "";
      this.formInline.planCode = "";
      this.formInline.storeType = "";
      this.formInline.companyName = "";
      this.formInline.legalPerson = "";
      this.formInline.storeAddressDetail = "";
      this.formInline.status = "";
      this.formInline.storeAddressDetail = "";
      this.formInline.approvalStatus = "6";
    },
    seedetail(v) {
      this.$router.push({
        name: "infoApprovalDetail",
        params: {
          v: v,
          shen: true
        }
      });
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: {
          planName: this.formInline.planName,
          planCode:this.formInline.planCode,
          legalPerson: this.formInline.legalPerson,
          status: this.formInline.status,
          storeAddressDetail: this.formInline.storeAddressDetail,
          approvalStatus: this.formInline.approvalStatus,
          storeType: this.formInline.storeType,
          companyName: this.formInline.companyName,
          orgSeq: this.orgSeq
        },
        ascs: [],
        descs: []
      };
      query_getZonePlanList(data).then(res => {
        (this.loading = false), (this.tableData = res.records);

        this.total = res.total;
        console.log(res, "ppe");
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this._queryUserReviewInfo();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this._queryUserReviewInfo();
    },

    confirmEdit(v) {
      console.log(v, this.reviewTypeflag, "rrr");
                  if (this.ruleForm.approvalStatus== "" || this.ruleForm.approvalStatus== null) {
        this.$message.error("请选择审核意见");
        return;
      }
               if (this.ruleForm.approvalComments== "" || this.ruleForm.approvalComments== null) {
        this.$message.error("请输入审核意见");
        return;
      }

      let data = {
        uuid: this.uuid,
        approvalStatus: this.ruleForm.approvalStatus,
        approvalComments: this.ruleForm.approvalComments
      };

      if (this.reviewTypeflag === true) {
        preliminaryExamination(data).then(res => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "success"
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error"
            });
          }
          this.dialogVisible = !this.dialogVisible;
          this._queryUserReviewInfo();
        });
      } else if (this.reviewTypeflag === false) {
        shopPreliminary(data).then(res => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "success"
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error"
            });
          }
          this.dialogVisible = !this.dialogVisible;
          this._queryUserReviewInfo();
        });
      }
    },

    handleClick(v) {
     this.$router.push({
        name: "infoApprovalDetail",
        params: {
          v: v,
          shen: true,
          shenhe:true,
          formInline:this.formInline
        }
      });
    },
    _queryUserReviewInfo() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          planName: this.formInline.planName,
          planCode:this.formInline.planCode,
          legalPerson: this.formInline.legalPerson,
          status: this.formInline.status,
          storeAddressDetail: this.formInline.storeAddressDetail,
          approvalStatus: this.formInline.approvalStatus,
          storeType: this.formInline.storeType,
          companyName: this.formInline.companyName,
          orgSeq: this.orgSeq
        },
        ascs: [],
        descs: []
      };
      query_getZonePlanList(data).then(res => {
        (this.loading = false), (this.tableData = res.records);
        this.total = res.total;
      });
    },
    selectInit(row,index){
        if(row.approvalStatus == 1){
            return true  //可勾选
        }else{    
            return false  //不可勾选
        }
      },
  // 多选表1
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    selectSend2() {
      this.dialogVisible = true;
      // 保存已选择的
      // let data = [];
      // this.dataListSelections.forEach((item, i) => {
      //   data.push(item.uuid);
      // });
      // let ids = data.join(",");
      // batchDeliverGoods(ids).then(res => {
      //   this.$message({
      //     showClose: true,
      //     message: res.code == 1 ? "操作成功" : "操作失败",
      //     type: res.code == 1 ? "success" : "error"
      //   });
      //   this.getDataList();
      // });
    },
    rolemanageone() {
      let data = {
        size: 1,
        current: 1,
        condition: {
          name: "",
          code: "auto_approve"
        }
      };
      systemparameterList(data).then(res => {
          for (let i in res.records) {
            this.formInline.uuid = res.records[i].uuid;
            if(res.records[i].value == "1") {
            this.formInline.value1 = true 
            }
            else {
              this.formInline.value1 = false
            }
          }  
      });
    },

    changeValue() {
      let data = {
          uuid: this.formInline.uuid,
          value: this.formInline.value1? "1" : "0"
        };
        updateinfo(data).then(res => {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success"
          });
          this.rolemanageone();
        });
    }
  }
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 0px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-row {
  margin-bottom: 0px;
}
</style>
